<template>
  <div>
    <navbar :showHeaderIcon="true" />
    <el-breadcrumb
      separator="/"
      style="padding-top: 20px; width: 1200px; margin: 0 auto"
    >
      <el-breadcrumb-item :to="{ path: '/exam' }">{{
        $route.query.examName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>我的任务</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tasklistContent">
      <div class="tasklistBox">
        <div class="mytasklist">
          <p>
            您的任务<i>{{ examlist.totalSubject }}</i
            >个科目，共<i>{{ examlist.totalGroup }}</i
            >个试题, 剩余<i>{{ examlist.remainingTasks }}</i
            >道题未评完
          </p>
          <!-- <span>当前科目分配模式按 效率模式，完成任务量 即算评卷完成 </span> -->
        </div>
        <el-table
          v-loading="taskloading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          :data="examlist.rows"
          border
          stripe
          style="width: 100%"
          :max-height="tabheight"
        >
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column prop="projectName" label="考试科目" width="300">
          </el-table-column>
          <el-table-column prop="examName" label="学科"> </el-table-column>
          <el-table-column prop="questionNumbers" label="试题编号">
          </el-table-column>
          <el-table-column label="分配模式">
            <template slot-scope="scope">
              <el-tooltip
                v-if="scope.row.assignmentRule == 1"
                content="本校教师可评阅任意题组，任务量不设上限，将本校任务全部完成，即评阅任务完成"
                placement="top"
              >
                <el-link type="primary" :underline="false">自动模式</el-link>
              </el-tooltip>
              <el-tooltip
                v-if="scope.row.assignmentRule == 2"
                content="教师完成平均分配的个人任务量，即评阅任务完成"
                placement="top"
              >
                <el-link type="primary" :underline="false">平均模式</el-link>
              </el-tooltip>
              <el-tooltip
                v-if="scope.row.assignmentRule == 3"
                content="教师完成个人任务量即评阅任务完成"
                placement="top"
              >
                <el-link type="primary" :underline="false">效率模式</el-link>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="评阅进度">
            <template slot-scope="scope">
              {{ scope.row.completedTasks }}/{{ scope.row.planTasks }}
            </template>
          </el-table-column>
          <el-table-column label="评阅状态">
            <template slot-scope="scope">
              <span
                :class="{
                  spanred: scope.row.configReviewStatus == 0,
                  spanblue: scope.row.configReviewStatus == 1,
                  spanred: scope.row.configReviewStatus == 2,
                  spangreen: scope.row.configReviewStatus == 3,
                  spangray: scope.row.configReviewStatus == null,
                }"
                >{{
                  scope.row.configReviewStatus == 0
                    ? "未开始"
                    : scope.row.configReviewStatus == 1
                    ? "开始评阅"
                    : scope.row.configReviewStatus == 2
                    ? "暂停评阅"
                    : scope.row.configReviewStatus == 3
                    ? "结束评阅"
                    : ""
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <span
                class="startReview"
                v-if="scope.row.configReviewStatus == 1"
                @click="startReview(scope.row)"
                >开始阅卷</span
              >
              <b v-else class="endReview">开始阅卷</b>
              <span
                class="startReview"
                style="color: #e37318"
                v-if="
                  scope.row.configReviewStatus == 1 &&
                  (scope.row.completedTasks > 0 || scope.row.reviewStatus == 3)
                "
                @click="Reviewskip(scope.row)"
                >回评</span
              >
              <b v-else class="endReview">回评</b>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-bottom">
          <div class="buttconbox">
            <span @click="refshTask(1)">刷新任务</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reviewListdate } from "@/api/mark/mark.js";
import { Navbar } from "@/layout/components";
export default {
  data() {
    return {
      type: 1,
      examlist: [],
      tabheight: 0,
      taskloading: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - 260;
    });
    this.reviewlistget(this.$route.query.projectId);
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },
    refshTask(type) {
      this.reviewlistget(this.$route.query.projectId);
    },
    //跳至阅卷详情
    startReview(row) {
      this.$router.push(
        "/mark?projectId=" +
          this.$route.query.projectId +
          "&examName=" +
          this.$route.query.examName
      );
      sessionStorage.setItem("taskContent", JSON.stringify(row));
    },
    //跳至回评详情
    Reviewskip(row) {
      this.$store.dispatch("app/setIsRefresh", true).then((res) => {
        sessionStorage.setItem("taskContent", JSON.stringify(row));
        this.$router.push(
          "/reviewlist/index?projectId=" +
            this.$route.query.projectId +
            "&examName=" +
            this.$route.query.examName
        );
      });
    },
    //评阅列表
    reviewlistget(id) {
      this.taskloading = true;
      let obj = {
        projectId: id,
      };
      reviewListdate(obj)
        .then((res) => {
          // console.info('reviewListdate',res)
          if (res.code == 200) {
            this.examlist = res.data;
          }
        })
        .finally(() => {
          // 无论成功失败都会执行
          this.taskloading = false;
        });
    },
  },
  components: {
    Navbar,
  },
};
</script>

<style scoped>
>>> .el-table >>> .even-row {
  background-color: #fafafb; /* 偶数行颜色 */
}
>>> .el-table >>> .odd-row {
  background-color: #ffffff; /* 奇数行颜色 */
}
.tasklistBox {
  width: 1200px;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #5572921a;
  margin: 20px auto;
  padding: 20px;
}
.mytasklist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}
.mytasklist i {
  font-style: normal;
  display: inline-block;
  padding: 0 8px;
  color: #1a48db;
}
>>> .el-table th.el-table__cell > .cell {
  text-align: center;
}
>>> .el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.buttconbox {
  display: flex;
  align-items: center;
  width: 1200px;
  margin: 0 auto;
}
.buttconbox span,
.buttconbox b {
  display: inline-block;
  width: 124px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  line-height: 34px;
}
.buttconbox span {
  background: #1a48db;
  color: #fff;
}
.buttconbox b {
  font-style: normal;
  background: #f2f6fb;
  border: 1px solid #1a48db;
  color: #1a48db;
  font-weight: normal;
  margin-left: 24px;
}
.spanred,
.spanblue,
.spangreen,
.spangray {
  display: inline-block;
  width: 76px;
  height: 22px;
  border-radius: 6px;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
}
.spanred {
  background: #ec555a0f;
  color: #ec555a;
}
.spanblue {
  background: #1a48db0f;
  color: #1a48db;
}
.spangreen {
  background: #288f410f;
  color: #288f41;
}
.spangray {
  background: #5b63710f;
  color: #5b6371;
}
.startReview {
  font-weight: 400;
  font-size: 14px;
  color: #1a48db;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 5px;
}
.endReview {
  font-weight: 400;
  font-size: 14px;
  color: #5b6371;
  margin: 0 5px;
}
</style>